{{setTitle     "扩展"}}
{{setSubTitle  "基于Pure进行扩展"}}
{{setActiveNav "extend"}}

{{addLocalCSS "/css/bootstrap/modal.css"}}

{{> header}}

<div class="content">

    <p>
    我们的目标之一是：当你使用Pure开发时，能够非常灵活地扩展，只要引入Pure，并且自己定制一些CSS，就可以确保你的网站或应用能够工作在不同的浏览器，并且每个网站看起来都很不一样。更重要的是，你引入的CSS文件非常小，这对于移动和其他网速慢的用户来说就很重要了。
    </p>

    <aside>
        <p>
            想要快速开始吗？你可以看下<a href="{{pages.layouts}}">布局模块</a>，我们已经提供了一些例子。
        </p>
    </aside>


    <h2 class="content-subhead">样式指导</h2>

    <h3>基于SMACSS</h3>
    <p>
        Pure被分成一组响应式的模块，遵守<a href="http://smacss.com/">SMACSS</a>写样式的约定。如果你没听过SMACSS，你应该快速了解一下，特别是关于<a href="http://smacss.com/book/type-module">模块规则</a>那一部分。
    </p>

    <h3>类名约定</h3>
    <p>
        Pure的约定之一：对于所有的模块都应该有一个标准的类名去定义共同的规则，然后用特定的类名去定义特殊的规则，做为该标准模块的一个子模块，所有的类名以{{code "pure-"}}做为前缀以防止冲突。另外，我们尽量不用表象化的类名，我们不以这样{{code "pure-form-horizontal"}}的形式命名，我们更愿意以这样{{code "pure-form-aligned"}}的形式命名。这样可以防止类名和样式的紧密耦合，具有良好的可维护性。
    </p>

    <p>
        举个例子，我们看下<a href="{{pages.forms}}">叠放式表单</a>的HTML和CSS:
    </p>

    <h4>叠放式表单：HTML</h4>
    <p>
        一个叠放式表单的创建需要添加两个类名：{{code "pure-form"}} 和 {{code "pure-form-stacked"}}。
    </p>

{{#code}}
<form class="pure-form pure-form-stacked">
    ...
</form>
{{/code}}

    <h4>叠放式表单: CSS</h4>
    <p>
        这两个类名有不同的目的。一个是用于定义各种表单的标准规则，一个用于定义叠放式表单的特定规则。
    </p>

{{#code "css"}}
/*
标准规则是所有表单都拥有的，这规则还包括.pure-form <inputs>，<fieldsets>，和<legends>的样式，并且布局是垂直对齐的。
*/
.pure-form { ... }

/*
特定规则只应用于叠放式表单。这规则还包括<input>子元素的样式，并且把它们变成块级元素显示，形成叠放效果。
*/
.pure-form-stacked  { ... }
{{/code}}


    <h2 class="content-subhead">扩展 Pure</h2>
    <p>
        如果你想要扩展Pure，我们建议你遵守以下的约定。举个例子，如果你给表单创建了新的类型，你的HTML和CSS最好跟下面的样式类似：
    </p>

{{#code}}
<form class="pure-form pure-form-custom">
    ...
</form>
{{/code}}

{{#code "css"}}
/* 添加你定制的表单样式 */
.pure-form-custom { ... }
{{/code}}

    <p>
        如果你想让你的按钮看起来很不一样，你可以看下<a href="{{pages.buttons}}">按钮模块</a>，这里有一些例子教你怎样采用模块化的结构去定制按钮的大小和样式。
    </p>

    <h2 class="content-subhead">使用皮肤编辑器</h2>

    <p>
        <a href="http://yui.github.io/skinbuilder/?mode=pure">皮肤编辑器</a>是一种不需要写CSS就可以定制Pure样式的很好的工具。首先，需要选择一种简单的颜色，就可以马上看到Pure的所有组件都换了颜色。然后，你把生成的CSS复制粘贴到你的样式文件里面，就可以了。
    </p>

    <p>
        <a class="pure-button" href="http://yui.github.io/skinbuilder/?mode=pure">开始编辑Pure皮肤</a>
    </p>


    <h2 class="content-subhead">基于Pure创建模块</h2>

    <p>
        下面是基于Pure的第三方模块
    </p>

    <dl>
        <dt><a href="http://tilomitra.github.io/csstypography/">Typography</a></dt>
        <dd>一种简单的排版样式</dd>

        <dt><a href="http://tilomitra.github.io/cssextras/">扩展</a></dt>
        <dd>简单的图片、缩略图、标签、上下文菜单和警告</dd>
    </dl>


    <h2 class="content-subhead">Pure + Bootstrap + JavaScript</h2>

    <p>
        Pure可以和其他库一起使用，比如Bootstrap和jQuery。做为一个开发者，你可以把Pure做为基础的CSS框架，然后在你的应用需要的地方，引入特定的Bootstrap和jQuery模块，这样做有几个好处：
    </p>

    <ul>
        <li>
            <p>
                你的网站或者web应用的CSS会小很多&mdash; 甚至在一些例子里可以减少<em>5倍</em>的大小。
            </p>
        </li>
        <li>
            <p>
                你可以很容易增加你自己的样式，不需要覆盖Pure的样式
            </p>
        </li>
        <li>
            <p>
                你不需要再单独引入Bootstrap的样式文件就可以使用到Bootstrap的插件模块。
            </p>
        </li>
    </ul>

    <p>
        这里有个Bootstrap的对话框的例子。在Pure的CSS的基础上，添加了Bootstrap的<a href="/css/bootstrap/modal.css">{{code "modal.css"}}</a>以及相关的jQuery插件
    </p>

    {{> extend/modal}}

</div>
